<template>
  <!-- <h2>主页页面-布局</h2> -->
  <div class="common-layout">
    <el-container class="demo-container">
      <el-header>
        <div class="logo-box">
          <div class="logo">
            <el-icon
              :size="25"
              style="vertical-align: middle; margin-right: 5px"
              ><Eleme /></el-icon
            ><span>v3商城管理系统</span>
          </div>
          <!-- 注释单按钮 -->
          <!-- <el-button type="primary" plain @click="toggleMenu()">
            <el-icon :size="25">
              <template v-slot="prop"><TurnOff /></template> </el-icon
          ></el-button> -->
          <el-radio-group v-model="isCollapse" style="margin-left: 10px">
            <el-radio-button :label="false">展开菜单</el-radio-button>
            <el-radio-button :label="true">收起菜单</el-radio-button>
          </el-radio-group>
        </div>

        <div class="welcome">后台管理系统</div>
        <el-dropdown>
          <span class="el-dropdown-link">
            管理员：{{ username }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的主页</el-dropdown-item>
              <el-dropdown-item @click="quit">安全退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-container>
        <MyMenu :isCollapse="isCollapse"></MyMenu>
        <el-main>
          <el-card>
            <!-- <transition name="router"><router-view /></transition> -->
            <!-- 下方代码替换注释的代码 -->
            <router-view v-slot="{ Component }">
              <transition name="router">
                <component :is="Component" />
              </transition>
            </router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import MyMenu from "./menu.vue";
import { onMounted, ref } from "vue";
import { clearSessionItem, getSessionItem } from "../../utils/storage";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const isCollapse = ref(false);
const username = ref("");
// const toggleMenu = () => {
//   console.log("console1111111111", isCollapse.value);
//   isCollapse.value = !isCollapse.value;
// };
const router = useRouter();
// 退出登录
const quit = () => {
  // console.log("退出系统");
  clearSessionItem();
  ElMessage({
    message: "您已安全退出！",
    type: "warning",
  });
  router.push({ name: "login" });
};
onMounted(() => {
  let loginUser = JSON.parse(getSessionItem("loginUser"));
  // if (loginUser.username) {
  //   username = loginUser.username;
  // }
  // 简化语法
  username.value = loginUser && loginUser.username;
});
</script>

<style lang="css" scoped>
.common-layout,
.el-container {
  width: 100%;
  height: 100%;
}
.el-header,
.el-footer {
  background-color: #bdedf7;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header {
  padding-left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-box {
  display: flex;
  justify-content: space-between;
}
.logo-box .logo {
  width: 280px;
  background-color: rgb(82, 185, 244);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-box .el-button {
  margin: 10px 10px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  overflow-y: hidden;
  /* line-height: 160px; */
}
.el-main .el-card {
  min-height: 100%;
  padding: 20px;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.router-enter,
.router-leave-to {
  position: absolute;
  opacity: 0;
  /* left: 500px; */
}
.router-enter-active,
.router-leave-active {
  transition: 0.2s;
  position: absolute;
}
.router-enter-to,
.router-leave {
  position: relative;
  opacity: 1;
  /* left: 0; */
  /* margin-left: 0; */
}
</style>
